import { View } from '@tarojs/components';
import { useEffect, useState } from 'react';
import { AtTag } from 'taro-ui';
import './index.scss';

interface IProps {
  active: number;
  list: any[];
  onChange: (id: number) => void;
}

export default function ({ active, list = [], onChange = () => {} }: IProps) {
  const [_active, setActive] = useState(0);
  const _onChange = (id: number) => {
    setActive(id);
    onChange && onChange(id);
  };

  useEffect(() => {
    setActive(active);
  }, [active]);
  return (
    <View className="label-component">
      {list.map((item: any) => {
        return (
          <AtTag
            key={item.id}
            onClick={() => _onChange(item.id)}
            size="small"
            active={item.id === _active}
          >
            {item.name}
          </AtTag>
        );
      })}
    </View>
  );
}
